<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>VTC - Holistic Programme Planning - HPP</title>
<script src="<s:url value="/js/jquery-1.4.2.js"/>" language="javascript1.5" type="text/javascript"></script>
<link id="screenBaseCss" rel="stylesheet" type="text/css" href="<s:url value="/css/screen.css"/>"/>
<script src="<s:url value="/js/ejs/Grid/GridE.js"/>" type="text/javascript"> </script>
<link href="<s:url value="/js/ejs/Styles/vtc.css"/>" rel="stylesheet" type="text/css" />
<link href="<s:url value="/css/vtc_screen.css"/>" rel="stylesheet" type="text/css" />
<link id="coreBaseCss" rel="stylesheet" type="text/css" href="<s:url value="/css/core.css"/>"/>
<script language="javascript1.5" type="text/javascript" src="<s:url value="/js/config.js"/>" ></script>
<script language="javascript1.5" type="text/javascript" src="<s:url value="/js/core.js"/>" ></script>
<script language="javascript1.5" type="text/javascript" src="<s:url value="/js/popup.js"/>" ></script>

<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link id="menuCSS" rel="stylesheet" type="text/css" href="../theme/color_6/css/menu.css"/>
<link id="screenCSS" rel="stylesheet" type="text/css" href="../theme/color_6/css/screen.css"/>
<style>
body {
	background:white !important;
}
</style>
</head>

<script>

function deleteRow(rowId){
	$("#"+rowId).remove();
}


var _size = 0;
function addBreakDown(){
	++_size;
	
	var newTr =  $("#newBd").clone();
	var id = "bd_"+_size;
	newTr.attr("id",id);
	newTr.find("#deleteBtn").click(function(){
		deleteRow(id);
	});
	
	
	newTr.find("#semester").attr("name","ppi.level2BreakDownList["+_size+"].semester");
	newTr.find("#plannedPlaces").attr("name","ppi.level2BreakDownList["+_size+"].plannedPlaces");
	
	
	newTr.find("#semester").attr("id","ppi.level2BreakDownList["+_size+"].semester");
	newTr.find("#plannedPlaces").attr("id","ppi.level2BreakDownList["+_size+"].plannedPlaces");
	
	$("#BD").append(newTr);
}

function isDigit()
{
   var key = window.event.keyCode;   
    if(key < 48 || key > 57){   
       window.event.keyCode = 0 ;
    }
}

</script>

<body>
<div class="bodyBlank" >
  <div class="padding" > 
    <div class="bodyBlank2" >
    <s:form name="breakDownForm" id="breakDownForm" 
	        action="endorsement!saveBreakDown.action?no-decorate=0" method="post">
	        <s:hidden id="ppi.id" name="ppi.id" value="%{ppi.id}"></s:hidden>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><div class="pageTitle">Planned Place Break Down - Year 1</div></td>
        </tr>
      </table>


      <div class="sList" >
        <table id="BD" width="100%" class="sTable" cellpadding="0" cellspacing="0" border="0" >
          <tr>
            <td class="sTh" style="width:150px" >By Semester/Month <img class="star" src="../images/spacer.gif" /></td>
            <td class="sTh" style="width:150px" >Planned Place</td>		                    
            <td class="sTh" ><div class="button sbtn" >
                <div class="left" >
                  <div class="right" >
                    <input class="inputButton" type="button" id="" name="" value="Add" onclick="addBreakDown()"/>
                  </div>
                </div>
              </div></td>
          </tr>
          <s:iterator value="ppi.level2BreakDownList" var="breakDown" status="status" >
           <tr class="sRow2" id="bd_${status.index}" >
             <td class="sCell" >
             	<select name="ppi.level2BreakDownList[${status.index}].semester" class="inputSelect" style="width: 150px"   value="<s:property value='#breakDown.semester'/>" 
 					<option value="">- Select -</option>
                  <option value="SPR" <s:if test="#breakDown.semester=='SPR'">selected="selected"</s:if> >SPR</option>
                  <option value="SUM" <s:if test="#breakDown.semester=='SUM'">selected="selected"</s:if> >SUM</option>
                  <option value="AUT" <s:if test="#breakDown.semester=='AUT'">selected="selected"</s:if> >AUT</option>
                  <option value="WIN" <s:if test="#breakDown.semester=='WIN'">selected="selected"</s:if> >WIN</option>
                  <option value="M01" <s:if test="#breakDown.semester=='M01'">selected="selected"</s:if> >M01</option>
                  <option value="M02" <s:if test="#breakDown.semester=='M02'">selected="selected"</s:if> >M02</option>
                  <option value="M03" <s:if test="#breakDown.semester=='M03'">selected="selected"</s:if> >M03</option>
                  <option value="M04" <s:if test="#breakDown.semester=='M04'">selected="selected"</s:if> >M04</option>
                  <option value="M05" <s:if test="#breakDown.semester=='M05'">selected="selected"</s:if> >M05</option>
                  <option value="M06" <s:if test="#breakDown.semester=='M06'">selected="selected"</s:if> >M06</option>
                  <option value="M07" <s:if test="#breakDown.semester=='M07'">selected="selected"</s:if> >M07</option>
                  <option value="M08" <s:if test="#breakDown.semester=='M08'">selected="selected"</s:if> >M08</option>
                  <option value="M09" <s:if test="#breakDown.semester=='M09'">selected="selected"</s:if> >M09</option>
                  <option value="M10" <s:if test="#breakDown.semester=='M10'">selected="selected"</s:if> >M10</option>
                  <option value="M11" <s:if test="#breakDown.semester=='M11'">selected="selected"</s:if> >M11</option>
                  <option value="M12" <s:if test="#breakDown.semester=='M12'">selected="selected"</s:if> >M12</option>
       			</select>
       			
               </td>
             <td class="sCell" >
             <input type="text"  id="ppi.level2BreakDownList[${status.index}].plannedPlaces"  name="ppi.level2BreakDownList[${status.index}].plannedPlaces" class="inputText"
					style="width: 100px"  value="<s:property value='#breakDown.plannedPlaces'/>"   onkeypress="isDigit()"/>
             </td>
             <td class="sCell buttonCell" ><div class="button sbtn" >
                 <div class="left" >
                   <div class="right" >
                     <input class="inputButton" type="button" id="" value="Delete" onclick="deleteRow('bd_${status.index}')"/>
                   </div>
                 </div>
               </div></td>
           </tr>
          </s:iterator>
<!--           <tr id="addNew"><td></td></tr> -->
        </table>
      </div>
     
      
      <table width="100%" border="0" cellspacing="0" cellpadding="0" bordercolor="red">
        <tr>
          <td>
            <div class="btnSet btnSetTypeB">
              <div class="left" >
                <div class="button" >
                  <div class="left" >
                    <div class="right" >
                      <input class="inputButton" type="submit" id="" name="" value="Save" />
                    </div>
                  </div>
                </div>
                <div class="button" >
                  <div class="left" >
                    <div class="right" >
                      <input class="inputButton" type="button" id="" name="" value="Cancel" onclick="CE.close()"/>
                    </div>
                  </div>
                </div>
              </div>
            </div></td>
        </tr>
	  </table>
	  </s:form>

	   <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="red" style="display:none" >
        <tr id="newBd" class="sRow2" >
                    <td class="sCell" >
                     <s:select name="semester" cssClass="inputSelect" id="semester"
									cssStyle="width: 150px"
									list="#{'':'- Select -','SPR':'SPR','SUM':'SUM','AUT':'AUT','WIN':'WIN','M01':'M01','M02':'M02','M03':'M03','M04':'M04','M05':'M05','M06':'M06','M07':'M07','M08':'M08','M09':'M09','M10':'M10','M11':'M11','M12':'M12'}"></s:select> 
                      </td>
                    <td class="sCell" >
                    <s:textfield name="plannedPlaces" id="plannedPlaces" cssClass="inputText" cssStyle="width: 150px"/>
                    </td>
                    <td class="sCell buttonCell" ><div class="button sbtn" >
                        <div class="left" >
                          <div class="right" >
                            <input class="inputButton" type="button" id="deleteBtn" name="" value="Delete" />
                          </div>
                        </div>
                      </div></td>
                  </tr>
		</table>
    </div>
 </div>
</div>
</body>
<!-- InstanceEnd -->
</html>
<script>

     var list = "<s:property value='ppi.level2BreakDownList.size' />";
     _size = list-1;   
     if(list==0){
    	 addBreakDown(); 
     }
    	
	 </script> 
